<template>
    <div class="questionbox">
        <div class="head flex item-center" style="margin: 10px 0;">
        <div class="number bold black" style="margin-right: 5px;">{{ currentNum }}/{{ total }}、</div>
        <div class="flex">
            <div v-html="(question.title || '')"></div>
            <div>{{ '（' + (question.score || '') + '分）' }}</div>
        </div>
    </div>
    <!-- 单选 -->
    <div class="content" v-if="question.question_type == '0'">
        <ul>
            <li  v-for="item of question.optionsList" :key="item.id" >
                <el-radio 
                    :disabled="(mode == '1' && question.uanswer) ? true: false"
                    @input="changeUanswer" 
                    v-model="question.uanswer" :label="item.code">
                    <div style="display: inline-block;"
                    :class="[
                        question.uanswer && item.code == question.answer && 'answer',
                        question.uanswer && item.code == question.uanswer && item.code != question.answer && 'error'
                    ]" 
                     v-html="item.answer"></div>
                </el-radio>
            </li>
        </ul>
        <div style="padding: 10px; background: #f0f8ff;" v-if="mode == '1' && question.uanswer">
            <div class="flex item-center">
                <div>答案：</div>
                <div>{{ question.answer }}</div>
            </div>
            <div class="flex item-center" style="margin: 10px 0;">
                <div>你选择：</div>
                <div>{{ question.uanswer }}</div>
            </div>
            <div class="flex item-center">
                <div>解析：</div>
                <div v-html="question.know_point"></div>
            </div>
        </div>
    </div>
    <!-- 判断题 -->
    <div class="content" v-if="question.question_type == '1'">
        <!--  -->
        <ul >
            <li>
                <el-radio 
                    :disabled="(mode == '1' && question.uanswer) ? true: false"
                    @input="changeUanswer" 
                    v-model="question.uanswer" 
                    label="Y">
                    <span :class="[
                        'Y' == question.answer && 'answer',
                        'Y' != question.answer && 'Y' == question.uanswer && 'error'
                    ]">正确</span>
                </el-radio>
            </li>
            <li>
                <el-radio 
                :disabled="(mode == '1' && question.uanswer) ? true: false"
                    @input="changeUanswer" 
                    v-model="question.uanswer" 
                    label="N">
                    <span :class="[
                         question.uanswer && 'Y' != question.answer && 'answer',
                         question.uanswer && 'Y' == question.answer && 'Y' != question.uanswer && 'error'
                    ]">错误</span>
                </el-radio>
            </li>
        </ul>
        <div style="padding: 10px; background: #f0f8ff;" v-if="mode == '1' && question.uanswer">
            <div class="flex item-center">
                <div>答案：</div>
                <div>{{ question.answer == 'Y' ? '正确' : '错误' }}</div>
            </div>
            <div class="flex item-center" style="margin: 10px 0;">
                <div>你选择：</div>
                <div>{{ question.uanswer == 'Y' ? '正确' : '错误' }}</div>
            </div>
            <div class="flex item-center">
                <div>解析：</div>
                <div v-html="question.know_point"></div>
            </div>
        </div>
    </div>
    <!-- 多选题 -->
    <div class="content" v-if="question.question_type == '2'">
        <el-checkbox-group v-model="checkList">
            <ul>
                <li  v-for="item of question.optionsList" :key="item.id" >
                    <el-checkbox  
                        :disabled="(mode == '1' && question.uanswer) ? true: false"
                        :label="item.code">
                        <div :class="[
                            question.uanswer && question.answer && question.answer.indexOf(item.code) != -1 && 'answer',
                            question.uanswer && question.answer && question.answer.indexOf(item.code) == -1 && question.uanswer.indexOf(item.code) != -1 && 'error'
                            ]" 
                            style="display: inline-block;" 
                            v-html="item.answer"></div>
                    </el-checkbox>
                </li>
            </ul>
        </el-checkbox-group>
        <!-- <el-button v-if="!question.uanswer"  class="submit-btn" @click="handleSubmit()">确认提交</el-button> -->
        <div style="padding: 10px; background: #f0f8ff;" v-if="mode == '1' && question.uanswer">
            <div class="flex item-center">
                <div>答案：</div>
                <div>{{ question.answer }}</div>
            </div>
            <div class="flex item-center" style="margin: 10px 0;">
                <div>你选择：</div>
                <div>{{ question.uanswer }}</div>
            </div>
            <div class="flex item-center">
                <div>解析：</div>
                <div v-html="question.know_point"></div>
            </div>
        </div>
    </div>
    <!-- 问答 -->
    <div class="content" v-if="question.question_type == '3'">
        <el-input
            type="textarea"
            :rows="5"
            :disabled="(mode == '1' && question.uanswer) ? true: false"
            resize="none"
            placeholder="请输入内容"
            v-model="inputText">
        </el-input>
        <!-- <el-button v-if="!question.uanswer" class="submit-btn" @click="handleSubmit()">确认提交</el-button> -->
        <div style="padding: 10px; background: #f0f8ff;" v-if="mode == '1' && question.uanswer">
            <ul>
                <li class="flex item-center" style="padding: 10px;">
                    <div>您的答案：</div>
                    <div v-html="question.answer"></div>
                </li>
                <li class="flex item-center" style="padding: 10px;">
                    <div>正确答案：</div>
                    <div v-html="question.answer"></div>
                </li>
            </ul>
            <div style="padding: 10px; background: #f0f8ff;">
                <div class="flex item-center">
                    <div>解析：</div>
                    <div v-html="question.know_point"></div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        // 1 不可修改，显示答案，0 可修改
        mode: {
            type: String,
            require: true,
            default: '1'
        },
        total: {
            type: Number,
            default: 1
        },
        currentNum: {
            type: Number,
            default: 1
        },
        question: {
            type: Object,
            require: true,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            checkList: [],
            inputText: ''
        }
    },
    methods: {
        changeUanswer(val) {
            console.log(val)
            this.$emit('changeUanswer', val)
        },
        handleSubmit() {
            if (this.question.question_type == '2') {
                this.question.uanswer = this.checkList.toString()
                this.changeUanswer(this.question.uanswer)
            } else if (this.question.question_type == '3') {
                if (!this.inputText || !this.inputText.trim().length) {
                    return this.$message.warning('请输入内容')
                }
                this.question.uanswer = this.inputText.trim()
                this.changeUanswer(this.question.uanswer)

            }
        }
    },
    watch: {
        question: {
            deep: true,
            handler(val) {
                if (val.question_type == '2') {
                    if (val.uanswer) {
                        const list = val.uanswer.split(',')
                        for (let i = 0 ; i < list.length ;i++) {
                            this.$set(this.checkList, i ,list[i])
                        }
                    }
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.answer {
    color: blue;
}
.error {
    color: red;
}
.content {
    ul {
        li {
            padding: 10px 0;
        }
    }
    .submit-btn {
        margin-top: 10px;
    }
}
</style>